<!-- 供求与招聘:展商详情 -->
<template>
<div class="supply">
    <div class="wCen animate__fadeInUp wow">
        <!-- 供求 -->
        <div class="left">
            <div class="homeTitle">
                <span class="icon"></span>{{$t("demand-t1")}} <span class="text" v-if="localeCn">Demand and Supply</span>
            </div>
            <div class="listBox">
                <!-- 左侧 -->
                <div class="listBox_l">
                    <div class="titleSecond">
                        <span class="icon"></span>{{$t("demand-t31")}}
                    </div>
                    <ul class="list">
                        <li class="list_i" v-for="(item,idx) in listBuy" :key="idx" @click="go2DemandDetail(item)">
                            <p class="list_i_t text_e-1">【{{$t("demand-t31")}}】{{item.intro}}</p>
                            <p class="list_i_date">{{parseTime(item.createTime)}}</p>
                        </li>
                    </ul>
                    <div class="more" @click="go2Demand(1)">
                        <span>{{$t("more-tip")}}</span>
                        <img src="@/assets/img/icon_more_green.svg" />
                    </div>
                </div>
                <!-- 右侧 -->
                <div class="listBox_r">
                    <div class="titleSecond">
                        <span class="icon icon-yellow"></span>{{$t("demand-t32")}}
                    </div>
                    <ul class="list">
                        <li class="list_i" v-for="(item,idx) in listSupply" :key="idx" @click="go2DemandDetail(item)">
                            <p class="list_i_t text_e-1">【{{$t("demand-t32")}}】{{item.intro}}</p>
                            <p class="list_i_date">{{parseTime(item.createTime)}}</p>
                        </li>
                    </ul>
                    <div class="more" @click="go2Demand(2)">
                        <span>{{$t("more-tip")}}</span>
                        <img src="@/assets/img/icon_more_green.svg" />
                    </div>
                </div>
            </div>
        </div>
        <!-- 招聘 -->
        <div class="right">
            <div class="homeTitle">
                <span class="icon"></span><span class="txt">{{$t("demand-t2")}}</span> <span class="text" v-if="localeCn">Recruitment</span>
            </div>
            <div class="listBox">
                <div class="titleSecond">
                    <span class="icon icon-green"></span>{{$t("demand-t33")}}
                </div>
                <ul class="list">
                    <li class="list_i" v-for="(item,idx) in listRecruitJob" :key="idx" @click="go2DemandDetail(item)">
                        <p class="list_i_t text_e-1">{{(item.demandType=='3'?$t("demand-tip-recruit"):$t("demand-tip-job"))+item.intro}}</p>
                        <p class="list_i_date">{{parseTime(item.createTime)}}</p>
                    </li>
                </ul>
                <div class="bottom">
                    <div class="more" @click="go2Demand('3,4')">
                        <span>{{$t("more-tip")}}</span>
                        <img src="@/assets/img/icon_more_green.svg" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import {
    getList,
} from '@/api/demand'
export default {
    computed:{
        cid() {
            return this.$route.params.cid || ''
        },
    },
    data() {
        return {
            listSupply: [],
            listBuy: [],
            listRecruitJob: [],
            form: {
                pageSize: 10,
                pageNum: 1,
                demandType: 0,
                exhibitorId:''
            },
        }
    },
    mounted() {
        this.form.exhibitorId = this.cid
        this.getListSupplyFun()
        this.getListBuyFun()
        this.getListRecruitJobFun()
    },
    methods: {
        // 供应列表
        getListSupplyFun() {
            this.form.demandType = 2
            this.invoke(getList, this.form).then(res => {
                if (res && res.code == 200) {
                    this.listSupply = res.rows;
                }
            })
        },
        // 求购列表
        getListBuyFun() {
            this.form.demandType = 1
            this.invoke(getList, this.form).then(res => {
                if (res && res.code == 200) {
                    this.listBuy = res.rows;
                }
            })
        },
        // 招聘求职列表
        getListRecruitJobFun() {
            this.form.demandType = '3,4'
            this.invoke(getList, this.form).then(res => {
                if (res && res.code == 200) {
                    this.listRecruitJob = res.rows
                }
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.supply {
    background: #F6F7F8;
    padding: 80px 0;

    p {
        margin: 0;
    }

    .homeTitle {
        margin-bottom: 65px;
    }

    .wCen {
        display: flex;
        justify-content: space-between;
    }

    $wL:65%;
    $wR:32%;
    $gutter:1.5%;

    // 左侧供求
    .left {
        width: $wL;
        flex: 0 0 $wL;
        margin-right: $gutter;

        .homeTitle {
            text-align: left
        }

        .listBox {
            border-radius: 20px 2px 2px 20px;
            background-color: #fff;
            padding-bottom: 70px;
            overflow: hidden;
            display: flex;
            justify-content: space-between;

            &_l,
            &_r {
                $w: 48%;
                width: $w;
                flex: 0 0 $w;
            }

            .list {
                &_i{
                    padding: 19px 0;
                }
            }
        }
        .bottom{
            display: flex;
            justify-content: space-between;
            align-items:center;
            padding-right: 10px;
        }
    }

    // 右侧招聘
    .right {
        width: $wR;
        flex: 0 0 $wR;
        margin-left: $gutter;

        .homeTitle {
            overflow: visible;
            display: flex;
            flex-direction: row-reverse;
            align-items: flex-end;
            padding-top: 10px;

            .icon {
                margin-right: 0;
                top: -10px;
                position: relative;
            }

            .txt {
                margin-right: -30px;
                position: relative;
            }

            .text {
                margin-right: 10px;
            }
        }

        .listBox {
            border-radius: 2px 20px 20px 2px;
            background-color: #fff;
            padding-bottom: 70px;
            overflow: hidden;
            position: relative;
            top:4px;

            .list {}
        }
    }

    // 列表
    .list {
        padding: 25px;

        &_i {
            padding: 25px 0;
            border-bottom: 1px dashed #979797;
            cursor: pointer;

            &_t {
                font-size: 18px;
                color: #191E33;
                margin-bottom: 10px;
                margin-left: -0.5em;
                &:hover{
                    color: #D53B76;
                }

            }

            &_date {
                font-size: 12px;
                color: rgba(25, 30, 51, 0.41);
            }
        }
    }

    .more {
        justify-content: flex-start;
        padding-left: 25px;
    }

    .titleSecond {
        font-size: 24px;
        font-weight: 400;
        color: #191E33;
        line-height: 33px;
        padding-left: 20px;
        margin-top: 35px;

        .icon {
            width: 54px;
            height: 54px;
            background-image: url("@/assets/img/icon_title_green.svg");
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center center;
            margin-right: -30px;
            margin-bottom: -20px;
            display:inline-block;

            &-yellow {
                background-image: url("@/assets/img/icon_title_yellow.svg")
            }
        }
    }
}
</style>
<style lang="scss" scoped>
@media (min-width:768px) and (max-width:1570px) {
    .supply {
        padding: 60px 0;
        .homeTitle {
            margin-bottom: 60px;
        }
        .list{
			padding:20px;
            &_i{
                &_t{
                    font-size:16px;
                }
            }
		}
        .more{
            padding-left: 20px;
        }
    }
}
</style>
<style lang="scss" scoped>
	@media (max-width:768px) {
		.supply {
			padding:40px 0px 30px 0;
		    .homeTitle {
		        margin-bottom: 20px;
		    }
		    .wCen {
				flex-direction: column;
				padding: 0;
		    }
		
		    $wL:calc(100% - 40px);
		    $wR:calc(100% - 40px);
		    $gutter:1%;
		
		    // 左侧供求
		    .left {
		        width: $wL;
		        flex: 0 0 $wL;
		        margin-right: $gutter;
				padding: 0 20px;
		
		        .homeTitle {
		            text-align: center
		        }
		
		        .listBox {
		            border-radius: 20px;
		            padding-bottom: 20px;
		            &_l,
		            &_r {
		                $w: 48%;
		                width: $w;
		                flex: 0 0 $w;
		            }
		
		            .list {
		                &_i{
		                    padding: 10px 0;
		                }
		            }
		        }
		    }
		
		    // 右侧招聘
		    .right {
		        width: $wR;
		        flex: 0 0 $wR;
		        margin-left: $gutter;
				padding: 0 20px;
		
		        .homeTitle {
					
		            flex-direction: row;
					justify-content: center;
		            align-items: center;
		            padding-top: 30px;
		
		            .icon {
		                margin-right: 0;
		                top: -10px;
		                position: relative;
		            }
		
		            .txt {
		                margin-right: 0px;
						margin-left: -30px;
		            }
		
		            .text {
		                margin-right: 10px;
		            }
		        }
		
		        .listBox {
		            border-radius: 20px;
		            padding-bottom: 20px;
		            .list {}
		        }
		    }
		
		    // 列表
		    .list {
		        padding: 10px;
		        &_i {
					padding: 15px 0;
		            &_t {
		                font-size: 12px;
						width: 100%;
		            }
		        }
		    }
		
		    .more {
				justify-content: center;
				span{
					font-size: 12px;
				}
		    }
		
		    .titleSecond {
		        font-size: 18px;
		        line-height: 33px;
		        padding-left: 20px;
		        margin-top: 10px;
		
		        .icon {
		            width: 30px;
		            height: 30px;
		            margin-right: -20px;
		            margin-bottom: -10px;
		        }
		    }
		}
		
	}
</style>